<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <div class="bbs">
        <header id="totalButton"><span>我要发帖</span></header>
        <section>
            <ul id="postList">

            </ul>
        </section>
        <div class="post">
            <input class="title" placeholder="请输入标题（1-50个字符）">
            所属版块：<select>
                <option>请选择版块</option>
                <option>电子书籍</option>
                <option>新课来了</option>
                <option>新手报到</option>
                <option>职业规划</option>
            </select>
            <textarea class="content"></textarea>
            <input class="btn" value="发布">
        </div>
    </div>

    <script>


        $('#totalButton').click(function () {
            $('.post').css("display", "block");
        });

        var str = ``;

        $('.btn').click(function () {
            var avatars = [
                'tou01.jpg',
                'tou02.jpg',
                'tou03.jpg',
                'tou04.jpg'
            ];
            var index = Math.floor(Math.random() * avatars.length);
            var avatar = avatars[index];

            var title = $('.title').val();
            var section = this.section;

            var myDate = new Date;
            var year = myDate.getFullYear(); //获取当前年
            var mon = myDate.getMonth() + 1; //获取当前月
            var date = myDate.getDate(); //获取当前日
            // var h = myDate.getHours();//获取当前小时数(0-23)
            // var m = myDate.getMinutes();//获取当前分钟数(0-59)
            // var s = myDate.getSeconds();//获取当前秒
            var week = myDate.getDay();
            var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            console.log(year, mon, date, weeks[week])
            var time = $("#time").html(year + "年" + mon + "月" + date + "日" + weeks[week]);

            str +=
                `<li>
                    <div>
                        <img src="./images/${avatar}">
                    </div>
                        <h1>${title}</h1>
                    <p>
                        <span>版块：${section}</span>
                        <span>发表时间：${time}</span>
                    </p>
                </li>`;

            $('ul').prepend(str);
            clearText();

        });

        function clearText() {
            $('.title').val('');
            $('#section').val('-1');
            $('.content').val('');
        }

    </script>

</body>

</html>